<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<p> Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。</p>
			<p style="font-size:25px;">计数器: {{ counter }}</p>
			<button @click="counter++" style="font-size:25px;">点我</button>
		</div>
		<HR SIZE=1>
		<br />
		<div id="computed_props">
			千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
		</div>
		<p id="info"></p>
	</body>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				counter: 1
			}
		});
		vm.$watch('counter', function(nval, oval) {
			alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
		});

		var vm2 = new Vue({
			el: '#computed_props',
			data: {
				kilometers: 0,
				meters: 0
			},
			methods: {},
			computed: {},
			watch: {
				kilometers: function(val) {
					this.kilometers = val;
					this.meters = val * 1000;
				},
				meters: function(val) {
					this.kilometers = val / 1000;
					this.meters = val;
				}
			}
		});
		// $watch 是一个实例方法
		vm2.$watch('kilometers', function(newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
			document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
	</script>

</html>